<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 600px;
            height: 800px;
            border: 10px solid red;
         
         display: flex;
       
          /* flex-direction: row-reverse; */
            flex-wrap: wrap;
          /* flex-wrap: 
                设置弹性元素是否在弹性元素中自动换行
                可选值：
                    nowrap 默认值：元素不会自动换行
                    wrap    元素沿着辅轴方向自动换行
                    wrap-reverse 元素沿着辅轴反方向换行（自下而上）
          
           */
           /*
            flex-flow: wrap和direction的简写属性
            flex-flow:row wrap
           
            */
            /* justify-content:如何分配主轴上的空白空间 （主轴上的元素如何排列）
                可选值：
                    flex-start 元素沿着主轴起边排列
                    flex-end 元素沿着主轴终边排列
                    center 元素居中排列
                    space-around    空白分布到元素两侧  
                    space-evenly    空白分布到元素的单边
                    space-between   空白均匀分布在元素之间
             */
             /* justify-content: space-between; */

             /* justify表示主轴
                align表示辅轴        
                  */
            /* 
                align-items:（这里没有给li设置高度）
                    - 元素在辅轴上如何对齐
                    - 元素间的关系      
                        可选值：
                        stretch 默认值 将元素的长度设置为相同的值
                        flex-start 元素不会拉伸，沿着辅轴起边对齐
                         flex-send 元素不会拉伸，沿着辅轴终边对齐
                         center 居中对齐
                         baseline 基线对齐（这里需要调整字的大小才可以看出来）
                  
                   */
                   align-items: center;
                   justify-content: center;
                   /* 居中利用上面两个 */

                   /* align-content:
                    水平方向的空白空间的分布
                    */
                    /* align-content:space-around; */
        }
        li{
            
            display: block;
            width: 200px;
        
            background-color: #bfa;
          
          
          
          
          
            line-height: 100px;
            text-align: center;
            font-size: 50px;
            
            flex-shrink: 0;
        }

        li:nth-child(1){
            align-self: stretch;
            /* 用来覆盖当前弹性元素上的align-items
            
             */
        }
        
        li:nth-child(2){
            background-color: red;
     
        }
        li:nth-child(3){
            background-color: orange;
       
        }
        li:nth-child(4){
            background-color: purple;
       
        }
        li:nth-child(5){
            background-color: yellow;
       
        }
       
    </style>
</head>
<
     <ul class="clearfix">
         <li>1</li>
         <li>2
             <div>2</div>
         </li>
         <li>3
             <div>3</div>
             <div>3</div>
         </li>
         <li>4</li>
         <li>5
             <div>5</div>
         </li>
     </ul>
     
</body>
</html>